<template>
  <div>
    <div class="div_shopping_box">
      <!-- 购物车标题 -->
      <div class="shop_tab">
        <span v-show="isShow" @click="onshow">编辑</span>
        <span v-show="!isShow" @click="onfale">完成</span>
        <span>购物车</span>
        <span></span>
      </div>
      <!-- 添加列表 -->
      <!-- <div class="shop_box">
        {{ this.$route.query.id }}
        传入信息
      </div> -->

      <!-- 购物车为空 -->
      <div class="div_shopping_big">
        <img
          src="../assets/shop.jpg"
          alt=""
          v-if="$store.state.shopcar.length == 0"
        />
      </div>
      <!-- 滑动单元格 -->
      <div class="content">
        <van-swipe-cell
          v-for="(item, index) in $store.state.shopcar"
          :key="index"
        >
          <van-card
            :price="item.basicInfo.minPrice"
            :title="item.basicInfo.name"
            class="goods-card"
            :thumb="item.basicInfo.pic"
          />
          <template #left>
            <van-checkbox v-model="checked"></van-checkbox>
          </template>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>

      <!-- 猜你喜欢 -->
      <div class="guess_like">
        <p>猜你喜欢</p>
      </div>

      <!-- 猜你喜欢商品列 -->
      <div class="renqi_box">
        <ul>
          <li
            class="renqi_div_box"
            v-for="(item, index) in getStoreList"
            :key="index"
            v-show="index >= 3 && index <= 6"
            @click="onClicklistdetail(item.id)"
          >
            <div class="renqi_div_box1">
              <img :src="item.pic" alt="" />
            </div>
            <div class="renqi_po">
              <h5>{{ item.name }}</h5>
              <p>￥{{ item.minPrice }}</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- 底部订单 -->
      <van-submit-bar :price="3050" button-text="下单" class="button_nav" v-show="isShow"  @click="onshow">
        <van-checkbox v-model="checked">全选</van-checkbox>
      </van-submit-bar>
         <van-submit-bar :price="3050" button-text="删除" class="button_nav" v-show="!isShow" @click="onfale">
        <van-checkbox v-model="checked">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      getStoreList: [],
      checked: "",
      isShow: true,
    };
  },
  mounted() {
    this.isShow = true;
    this.$API.getStoreList().then((res) => {
      console.log(res);
      this.getStoreList = res.data.data;
    });
  },
  methods: {
    onClicklistdetail(id) {
      this.$router.push({ path: "/Recommend_detail", query: { id } });
      console.log(id);
    },
    // 判断编辑和完成
    onshow() {
      this.isShow = false;
    },
    onfale() {
      this.isShow = true;
    },
  },
};
</script>

<style lang="scss">
.div_shopping_box {
  width: 100%;
  .shop_tab {
    width: 100%;
    height: 1rem;
    background: rgb(252, 252, 252);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px rgb(230, 229, 229) solid;
    span {
      box-sizing: border-box;
      &:nth-child(1) {
        margin-left: 0.5rem;
        color: red;
      }
      &:nth-child(2) {
        margin-left: 0.5rem;
        color: red;
      }
    }
  }
  .shop_box {
    width: 100%;
    background: pink;
  }
  // 购物车为空
  .div_shopping_big {
    width: 100%;
    img {
      width: 100%;
      height: 7rem;
    }
  }
  // 猜你喜欢
  .guess_like {
    width: 100%;
    p {
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      text-align: center;
      background: whitesmoke;
    }
  }
  // 猜你喜欢商品列
  .renqi_box {
    width: 100%;
    height: 2rem;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        img {
          width: 100%;
          height: 80%;
        }
        .renqi_po {
          p {
            color: red;
          }
        }
      }
    }
  }
  .van-nav-bar__content {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
  }
  // 底部订单
  .button_nav {
    width: 100%;
    position: fixed;
    bottom: 6.78vh;
  }

  // 滑动单元格
  .delete-button {
    height: 100%;
  }
  // 复选框
  .content .van-checkbox__icon--round{
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.6rem;
  }
}
</style>